/**
 * Default Look and Feel */

$dialog-btn-radius: 8px;
$dialog-btn-ok-color1: #4492F7;
$dialog-btn-ok-color2: #2C7CF6;
$dialog-btn-ok-text-color: #fff;

.alertify, .alertify-log {
  // font-family: sans-serif;
}

.alertify {
  background: #FFF;
  border: 2px solid #333;

  /* browsers that don't support rgba */
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
  width: 400px;
  margin-left: -200px;
  -webkit-background-clip: padding;

  /* Safari 4? Chrome 6? */
  -moz-background-clip: padding;

  /* Firefox 3.6 */
  background-clip: padding-box;

  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  max-height: 86%;
  overflow-y: auto;
}

.alertify-message {
  margin-bottom: 10px;
}

.alertify-buttons {
  // margin-bottom: -5px;
}

.alertify-text {
  border: 1px solid #CCC;
  padding: 10px;
  border-radius: 4px;
}

.alertify-button {
  border-radius: $dialog-btn-radius;
  color: #FFF;
  // font-weight: bold;
  padding: 3px 13px;
  font-size: 14px;
  text-decoration: none;
  font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  letter-spacing: 0.5px;

  &:hover {
    outline: none;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 5px #2B72D5;
  }

  &:active {
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  }
}

.alertify-button-cancel {
  background-color: #fff;
  border: 1px solid #DDDDDD;
  border-bottom-color: #C3C3C3;
  border-top-color: #E6E6E6;
  color: #262626;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);

  &:focus {
    box-shadow: 0 0 5px #2B72D5;
  }
}

.alertify-button-ok {
  color: $dialog-btn-ok-text-color;
  background: linear-gradient(180deg, $dialog-btn-ok-color1 0%, $dialog-btn-ok-color2 100%);
  // background-color: #5CB811;
  // border: 1px solid #3B7808;

  &:hover, &:focus {
    // background-color: #5CB811;
    // border: 1px solid #3B7808;
  }
}

.alertify-log {
  background: #1F1F1F;
  background: rgba(0, 0, 0, 0.9);
  padding: 15px;
  border-radius: 4px;
  color: #FFF;
  text-shadow: (-1px) -1px 0 rgba(0, 0, 0, 0.5);
}

.alertify-log-error {
  background: #FE1A00;
  background: rgba(254, 26, 0, 0.9);
}

.alertify-log-success {
  background: #5CB811;
  background: rgba(92, 184, 17, 0.9);
}
